<!-- 菜单 -->
<template>
  <el-aside width="200px">
    <div class="title">校园二手交易系统</div>
    <el-menu
      :default-active="defaultRouter"
      background-color="#303133"
      text-color="#fff"
      router
    >
      <el-menu-item index="/home/index">
        <i class="el-icon-s-check"></i>
        <span slot="title">商品首页</span>
      </el-menu-item>
      <el-menu-item index="/home/user" v-if="isAdmin">
        <i class="el-icon-s-order"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/home/personal" v-if="isUser">
        <i class="el-icon-s-order"></i>
        <span slot="title">个人发布中心</span>
      </el-menu-item>
      <el-menu-item index="/home/goods" v-if="isAdmin">
        <i class="el-icon-s-order"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
      <el-menu-item v-if="isUser" index="/home/shoppingcart">
        <i class="el-icon-menu"></i>
        <span slot="title">购物车</span>
      </el-menu-item>
      <el-menu-item index="/home/orders" v-if="isUser">
        <i class="el-icon-menu"></i>
        <span slot="title">交易订单</span>
      </el-menu-item>
      <el-menu-item index="/home/buyOrders" v-if="isUser">
        <i class="el-icon-menu"></i>
        <span slot="title">个人订单</span>
      </el-menu-item>
      <!-- <el-menu-item index="/home/comment" v-if="isUser">
        <i class="el-icon-menu"></i>
        <span slot="title">评论管理</span>
      </el-menu-item> -->
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  computed: {
    defaultRouter() {
      return this.$route.path;
    },
    isAdmin() {
      return sessionStorage.getItem("type") === "admin";
    },
    isUser() {
      return sessionStorage.getItem("type") === "user";
    },
  },
};
</script>

<style scoped>
.title {
  text-align: center;
  line-height: 60px;
  color: #fff;
}

.el-aside {
  background-color: #303133;
  color: #333;
  min-height: 100vh;
}
</style>